import { onMounted } from "vue"

type Options = {
    el: string
}

export default function (options: Options): Promise<{ baseURL: string }> {
    return new Promise((resolve) => {
        onMounted(() => {
            let img: HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
            // 加载完成后再解析为base64
            img.onload = () => {
                resolve({
                    baseURL: base64(img)
                })
            }
        })

        // 图片转base64
        const base64 = (el: HTMLImageElement) => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = el.width
            canvas.height = el.height
            ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)

            return canvas.toDataURL('image/jpg')
        }
    })
}
